<template>
  <div>
    <el-form ref="addVote" :model="addVote" label-width="80px">
      <el-form-item label="公告标题">
        <el-input
          v-model="addVote.title"
          placeholder="公告标题"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="发布部门">
        <el-select v-model="addVote.department" placeholder="发布部门">
          <el-option label="产品部" value="1"></el-option>
          <el-option label="开发部" value="2"></el-option>
          <el-option label="运营部" value="3"></el-option>
          <el-option label="总经办" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属栏目">
        <el-select v-model="addVote.fromColumn" placeholder="所属栏目">
          <el-option label="新闻资讯" value="1"></el-option>
          <el-option label="通知公告" value="2"></el-option>
          <el-option label="规章制度" value="3"></el-option>
          <el-option label="行业动态" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input
          v-model="addVote.paiXu"
          placeholder="排序"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          style="width: 500px"
          v-model="addVote.text"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8030/ftp/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="upheaders"
        >
          <img v-if="imageUrl" :src="addVote.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件,且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-button type="button" @click.prevent="addProjects">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      textarea: "",
      addVote: {},
      avatar: "",
      customImageFile: null,
      imageUrl: false,
      upheaders: {
        Authorization: "Bearer" + localStorage.getItem("token"),
      },
    };
  },
  created() {
    this.addVote = this.$route.params;
  },
  methods: {
    addProjects() {
      axios.post("/notice/addNotice", this.addVote).then((res) => {
        alert(res.data.message);
        this.$router.push({ path: "/notice" });
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res != "上传失败") {
        this.$message.success("上传成功");
        this.addVote.img = res;
        this.imageUrl = true;
      } else {
        this.imageUrl = false;
        this.$message.error(res);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或者png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 500kb!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
</style>
